<template>
  <view class="page">
   <!--滑动选择器 -->
   <view class="form-item">
        <view class="label">
          <image class="icon" :src="clockIcon"></image>
          <view class="text">本次目标时长（必填）：</view>
        </view>
        <studyDurationInput
          ref="studyDurationInput"
          :target-duration.sync="inputForm.targetDuration"
          v-if="!valIsEmpty(inputForm.targetDuration)"
        ></studyDurationInput>
      </view>
  </view>
</template>

<script>
import request from "@/utils/request"
import studyDurationInput from "./components/studyDurationInput.vue"
import { showToast, valIsEmpty } from "@/utils"

export default {
  computed: {},
  components: {},
  data() {
    return {
      inputForm: {
        studyRoomId: "",
        targetDuration: 0,
        studyGoal: "",
        studyPlan: "",
      },
    }
  },
  // 获取活动列表
  onLoad(query) {
    if (query.details) {
      this.inputForm = JSON.parse(query.details)
    }
    this.inputForm.studyRoomId = query.studyRoomId
    this.$nextTick(() => {
      this.$refs.studyDurationInput.echoData()
    })
  },
  onShow() {},
  methods: {
    valIsEmpty,
    submit() {
      if (!this.inputForm.studyPlan) {
        showToast.default("请填写学习计划")
        return
      }
      if (!this.$refs.studyDurationInput.beforeSubmit()) {
        return
      }
      request({
        url: "studyRoomUserPlan/addUserPlan",
        data: this.inputForm,
        showLoading: true,
        errorHandle: true,
      }).then(() => {
        //跳转到自习室自习页面
        request({
          url: "studyRoom/allowEntryJoinStudy",
          data: {
            studyRoomId: this.inputForm.studyRoomId,
          },
          showLoading: true,
          errorHandle: true,
        }).then((data) => {
          uni.redirectTo({
            url: `/studyRoom/pages/learning/index?details=${JSON.stringify(data.resultData)}`,
          })
        })
      })
    },
  },
}
</script>

<style lang="scss" scoped>
.page {
  min-height: 100vh;
  background: #f0f0f0;
  padding-bottom: env(safe-area-inset-bottom);
  .form {
    padding: 30rpx;
    .form-item {
      &:not(:first-child) {
        margin-top: 50rpx;
      }
      .label {
        display: flex;
        align-items: center;
        .icon {
          width: 46rpx;
          height: 46rpx;
        }
        .text {
          font-size: 34rpx;
          margin-left: 14rpx;
        }
      }
      .value {
        margin-top: 20rpx;
        .input-container {
          padding: 20rpx;
          border: 2rpx solid rgba(187, 187, 187, 1);
          background: white;
          .input {
            width: 100%;
            font-size: 30rpx;
          }
          .textarea {
            height: 150rpx;
          }
        }
        .label-list {
          margin-top: 20rpx;
          .label-item {
            margin-right: 20rpx;
            height: 50rpx;
            line-height: 50rpx;
            padding: 0 20rpx;
            background: #dedada;
            font-size: 30rpx;
            border-radius: 25rpx;
          }
        }
      }
    }

    .submit-btn {
      margin: {
        top: 50rpx;
        left: auto;
        right: auto;
      }
      color: white;
      font-size: 32rpx;
      width: 446rpx;
      height: 68rpx;
      border-radius: 8rpx;
      background: #54bd81;
    }
  }
}
</style>
